<template>
    <Collapse v-model="cur" simple>
        <Panel name="1" style="font-weight:bold">
            基本信息
            <p slot="content">
                <Table :columns="teamBasisCol" :data="teamBasisData"  style="margin-top:10px;" border></Table>
            </p>
        </Panel>
        <Panel name="2" style="font-weight:bold">
            收入项
            <p slot="content"> <Button type="primary">添加</Button><Table :columns="teamIncomeCol" :data="teamIncomeData"  style="margin-top:10px;" border></Table></p>
        </Panel>
        <Panel name="3" style="font-weight:bold">
            支出项
            <p slot="content"> <Button type="primary">添加</Button><Table :columns="teamOutlayCol" :data="teamOutlayData"  style="margin-top:10px;" border></Table></p>
        </Panel>
        <Panel name="4" style="font-weight:bold">
            统计
            <p slot="content"><Table :columns="teamTotalCol" :data="teamTotalData"  style="margin-top:10px;" border></Table></p>
        </Panel>
    </Collapse>
</template>
<script>
import TableEdit from "@/components/TableEdit"
export default {
    name: 'teaminfo',
    props: [
        'teamInfo'
    ],
    components: {
        TableEdit
    },
    data(){
        return {               
            editable: true,
            edittingCellId: '',
            edittingText: '',
            cur: ["1","2","3","4"],
            teamBasisCol: [
                {
                    title: '线路',
                    key: 'title',
                    editable: true,
                    editType: 'input'
                },
                 {
                    title: '团号',
                    key: 'sn',
                    editable: true
                },
                {
                    title: '出发日期',
                    key: 'start_date',
                    editable: true
                },
                {
                    title: '回程日期',
                    key: 'end_date',
                    editable: true
                },
                {
                    title: '所属',
                    key: 'category_id',
                    editable: true,
                    editType: 'list'
                },
                {
                    title: '部门',
                    key: 'branch_id',
                    editable: true
                },
                {
                    title: '导游',
                    key: 'guide_id',
                    editable: true
                },
                {
                    title: '联系人',
                    key: 'link_info',
                    editable: true
                },                    
                {
                    title: '出团人数',
                    key: 'num',
                    editable: true
                },
                {
                    title: '操作员',
                    key: 'operator_id',
                    editable: true
                }
            ],
            teamBasisData: [],
            teamIncomeCol: [
                {
                    title: '所属客户',
                    key: 'client_id',
                    editable: true
                },
                {
                    title: '客人名称',
                    key: 'guest',
                    editable: true
                },
                {
                    title: '项目',
                    key: 'kink_id',
                    editable: true
                },
                {
                    title: '数量',
                    key: 'num',
                    editable: true
                },
                {
                    title: '销售单价',
                    key: 'sell_price',
                    editable: true
                },
                {
                    title: '应收金额'                    
                },
                {
                    title: '已收款'                    
                },                    
                {
                    title: '尚欠收款'                    
                },
                {
                    title: '业务员',
                    key: 'salesman_id',
                    editable: true
                },
                {
                    title: '备注',
                    key: 'remark',
                    editable: true
                },
                {
                    title: '发票开具状态',
                    key: 'is_invoice',
                    editable: true
                },
                {
                    title: '操作',
                    width: 150,                       
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showTeamInfoModel(params);
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.onRemove(params)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            teamIncomeData: [],
            teamOutlayCol: [
                {
                    title: '供应商',
                    key: 'supplier_id',
                    editable: true,
                    editType: 'list'
                },
                {
                    title: '产品内容',
                    key: 'product_name',
                    editable: true
                },
                {
                    title: '项目',
                    key: 'kink_id',
                    editable: true
                },
                {
                    title: '数量',
                    key: 'num',
                    editable: true
                },
                {
                    title: '成本单价',
                    key: 'cost_price',
                    editable: true
                },
                {
                    title: '应付金额'                    
                },
                {
                    title: '已付款'
                },                    
                {
                    title: '尚欠付款'
                },
                {
                    title: '备注',
                    key: 'remark',
                    editable: true
                },
                {
                    title: '是否欠发票',
                    key: 'is_invoice',
                    editable: true
                },
                {
                    title: '操作',
                    width: 150,                       
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showTeamInfoModel(params);
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.onRemove(params)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            teamOutlayData: [],
            teamTotalCol: [
                {
                    title: '出发日期',
                    key: 'start_date'                    
                },
                {
                    title: '所属',
                    key: 'category_id'
                },
                {
                    title: '部门',
                    key: 'branch_id'
                },
                {
                    title: '数量',
                    key: 'num'
                },
                {
                    title: '销售收入'                    
                },
                {
                    title: '已收款'                    
                },
                {
                    title: '未收款'                    
                },
                {
                    title: '销售成本'                   
                },
                {
                    title: '已付款'                    
                },
                {
                    title: '未付款'
                },                    
                {
                    title: '毛利'
                },
                {
                    title: '毛利率'                    
                },   
                {
                    title: '操作员',
                    key: 'operator_id'
                },   
                {
                    title: '业务提成'                    
                },    
                {
                    title: '操作提成'                    
                },           
                {
                    title: '操作',
                    width: 150,                       
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showTeamInfoModel(params);
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.onRemove(params)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            teamTotalData: []
        }
    },
    watch: {       
       teamInfo(val,old){    
           this.teamBasisData.length = 0;
           this.teamBasisData.push(val);
           this.teamIncomeData = val.incomes;
           this.teamOutlayData = val.outlays;          
       }
    },
    methods: {
        editTeam: function(params){                 
            this.$axios({
                mothod: 'post',
                url: 'http://localhost/public/api/team/update',
                params: params
            }).then((response)=> { 
                this.$Message.success('编辑成功!'); 
            })
            .catch(function (error) {
                this.$Message.error('编辑失败!');
            }); 
        }, 
        editTeamIncome: function(params){                 
            this.$axios({
                mothod: 'post',
                url: 'http://localhost/public/api/team_income/update',
                params: params
            }).then((response)=> { 
                this.$Message.success('编辑成功!'); 
            })
            .catch(function (error) {
                this.$Message.error('编辑失败!');
            }); 
        },
        editTeamOutlay: function(params){                 
            this.$axios({
                mothod: 'post',
                url: 'http://localhost/public/api/team_outlay/update',
                params: params
            }).then((response)=> { 
                this.$Message.success('编辑成功!'); 
            })
            .catch(function (error) {
                this.$Message.error('编辑失败!');
            }); 
        }
    },
    mounted () {
        this.teamBasisCol = this.teamBasisCol.map((item,index)=>{
            let res = item
            if(res.editable) {
                res.render = (h,params) => {                    
                    return h(TableEdit,{
                          props: {
                            params: params,
                            value: this.teamBasisData[params.index][params.column.key],
                            edittingCellId: this.edittingCellId,
                            editable: this.editable,
                            editType: params.column.editType
                        },
                        on: {
                            'input': val => {
                                this.edittingText = val
                            },
                            'on-start-edit': (params) => {
                                this.edittingCellId = `editting-${params.index}-${params.column.key}`                           
                            },
                            'on-cancel-edit': (params) => {
                                this.edittingCellId = ''                            
                            },
                            'on-save-edit': (params) => {                                                              
                                this.teamBasisData[params.index][params.column.key] = this.edittingText
                                this.edittingCellId = ''
                                this.editTeam(this.teamBasisData[params.index]);
                                this.$emit('getTeamList')
                            }
                        }
                    })
              }
            }
            return res
        }),
        this.teamIncomeCol = this.teamIncomeCol.map((item,index)=>{
            let res = item
            if(res.editable) {
                res.render = (h,params) => {                    
                    return h(TableEdit,{
                          props: {
                            params: params,
                            value: this.teamIncomeData[params.index][params.column.key],
                            edittingCellId: this.edittingCellId,
                            editable: this.editable,
                            editType: params.column.editType
                        },
                        on: {
                            'input': val => {
                                this.edittingText = val
                            },
                            'on-start-edit': (params) => {
                                this.edittingCellId = `editting-${params.index}-${params.column.key}`                           
                            },
                            'on-cancel-edit': (params) => {
                                this.edittingCellId = ''                            
                            },
                            'on-save-edit': (params) => {                                   
                                this.teamIncomeData[params.index][params.column.key] = this.edittingText
                                this.edittingCellId = ''
                                this.editTeamIncome(this.teamIncomeData[params.index]);
                                this.$emit('getTeamList')
                            }
                        }
                    })
              }
            }
            return res
        }),
        this.teamOutlayCol = this.teamOutlayCol.map((item,index)=>{
            let res = item
            if(res.editable) {
                res.render = (h,params) => {                    
                    return h(TableEdit,{
                          props: {
                            params: params,
                            value: this.teamOutlayData[params.index][params.column.key],
                            edittingCellId: this.edittingCellId,
                            editable: this.editable,
                            editType: params.column.editType
                        },
                        on: {
                            'input': val => {
                                this.edittingText = val
                            },
                            'on-start-edit': (params) => {
                                this.edittingCellId = `editting-${params.index}-${params.column.key}`                           
                            },
                            'on-cancel-edit': (params) => {
                                this.edittingCellId = ''                            
                            },
                            'on-save-edit': (params) => {  
                                this.teamOutlayData[params.index][params.column.key] = this.edittingText
                                this.edittingCellId = ''
                                this.editTeamOutlay(this.teamOutlayData[params.index]);
                                this.$emit('getTeamList')
                            }
                        }
                    })
              }
            }
            return res
        })
    }
}
</script>
